<template>
  <el-container class="layout-container-demo">
    <el-aside width="20%">
          <h2 class="mb-2">求职智能分析后台系统</h2>
          <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
          >
            <el-menu-item index="1" @click="loadOverview">
              <el-icon><Search /></el-icon>
              <span>查询用户信息</span>
            </el-menu-item>

            <el-menu-item index="2" @click="loadHouseIndex">
              <el-icon><Search /></el-icon>
              <span>查询企业信息</span>
            </el-menu-item>

            <el-menu-item index="3" @click="regular">
              <el-icon><icon-menu /></el-icon>
              <span>岗位审核</span>
            </el-menu-item>
          </el-menu>
    </el-aside>


    <el-container>
      <el-header style="text-align: right; font-size: 13px">

      </el-header>

      <el-main>
        <component :is="currentView" :name="detailName"></component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Menu as IconMenu, Search, Setting,PieChart } from '@element-plus/icons-vue'
import Content1 from "@/view/behind/MainContent1.vue";
import Content2 from "@/view/behind/MainContent2.vue";
import Content3 from "@/view/behind/MainContent3.vue";
const router = useRouter()
let detailName: ''
const currentView = ref(Content1) // 默认组件，可以是任何组件

const loadOverview= () => {
  currentView.value = <string>Content1
}

const loadHouseIndex = () => {
  currentView.value = <string>Content2 // 加载 house_index.vue 组件
}

const regular= () => {
  currentView.value = <string>Content3
}



</script>

<style scoped>
/*.layout-container-demo .el-header {*/
/*  position: relative;*/
/*  background-color: var(--el-color-primary-light-7);*/
/*  color: var(--el-text-color-primary);*/
/*}*/
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  /*background: var(--el-color-primary-light-8);*/
  padding-right: 20px; /* 在 aside 的右侧添加填充 */
}
/*.layout-container-demo .el-menu {*/
/*  padding-right: 20%;*/
/*}*/

.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 30px;
}
</style>
